<template>
  <div class="w h page-text" v-bind="$attrs">
    <slot name="content">
      <span class="f-s0 label">
        <slot name="label" :value="label">
          <span v-html="label"></span>
        </slot>
      </span>
      <span class="f-g1 text">
        <slot name="default" :value="text">
          <span v-html="text"></span>
        </slot>
      </span>
    </slot>
  </div>
</template>

<script>
export default {
  name: 'pageText',
  props: {
    label: String,
    text: String,
  },
  data() {
    return {}
  }

}
</script>

<style lang="scss" scoped>
.page-text {
  @extend .f-b, .a-i-c;
  box-sizing: border-box;
  line-height: 30px;
  height: 30px;

  .label {
    color: #807e7e;
    width: 60px;
    @extend .t-l,.c7;
    padding-left: 14px;
    padding-right: 10px;
  }

  .text {
    color: #181818;
    @extend .t-l;
  }
}
</style>